<template>
	<!--球员基本信息-->
	<z-nav-bar class="nav-bar" title="球员评测" transparentTitle="auto" :isBlack="false"></z-nav-bar>
	<view class="cp-base" :style="{'padding-top': navBarHeight + 'px'}">
		<view class="cp-top flex_fsc">
			<view class="cp-top-left">
				<image :src="setting.oss_pub_domain + playerInfo.avatar" mode=""></image>
				<view class="cp-top-left-sex">
					<image v-if="playerInfo.sex" :src="setting.oss_pub_domain + '/app-img/player/evaluation/female.png'"></image>
					<image v-else :src="setting.oss_pub_domain + '/app-img/icon/sex.png'" class="icon-size-32"></image>
				</view>
			</view>
			<view class="cp-top-right">
				<view class="cp-top-right-top flex_fsc">
					<text>{{ playerInfo.name }}</text>
					<!-- <text class="num-student">球龄: 10年</text> -->
				</view>
				<view class="cp-top-right-bottm">
					<text>目前杆数:{{ playerInfo.score ? $gc.score[playerInfo.score].label : '--' }}</text>
					<text class="st">|</text>
					<text>目标杆数:{{ playerInfo.targetScore ? $gc.score[playerInfo.targetScore].label : '--' }}</text>
				</view>
			</view>
		</view>
		<!--测试-->
		<view class="cp-test">
			<view class="cp-test-tit">基础测试</view>
			<view class="cp-test-list flex_fsc">
				<view
					class="cp-test-list-con"
					v-for="(element, index) in data.basicTest"
					:key="index"
					@click="fetchDetail(element, 1)"
				>
					<image :src="setting.oss_pub_domain + element.image" class="cp-con-img"></image>
					<view class="cp-test-list-con-con u-line-1">{{ element.dictLabel }}</view>
					<view class="cp-test-list-con-con-status flex_sbc">
						<view v-if="element.evaluationStatus">已测</view>
						<view class="uni-color-grey" v-else>未测</view>
						<image :src="setting.oss_pub_domain + '/app-img/player/evaluation/fanhui_next.png'"></image>
					</view>
				</view>
			</view>
			<view class="cp-test-tit">身体测试</view>
			<view class="cp-test-list flex_fsc">
				<view
					class="cp-test-list-con"
					v-for="(element, index) in data.physicalTest"
					:key="index"
					@click="fetchDetail(element, 2)"
				>
					<image :src="setting.oss_pub_domain + element.image" class="cp-con-img"></image>
					<view class="cp-test-list-con-con u-line-1">{{ element.dictLabel }}</view>
					<view class="cp-test-list-con-con-status flex_sbc">
						<view v-if="element.evaluationStatus">已测</view>
						<view class="uni-color-grey" v-else>未测</view>
						<image :src="setting.oss_pub_domain + '/app-img/player/evaluation/fanhui_next.png'"></image>
					</view>
				</view>
			</view>
		</view>
		<!--技能测评-->
		<view class="cp-jn">
			<view class="cp-jn-tit">
				<text class="text-w">技能评测</text>
				<text class="cp-bz">(可阶段性多次评测)</text>
			</view>
			<view class="cp-jn-con">
				<text v-for="skill in data.skillEvaluation" :key="skill.id" @click="fetchDetail(skill, 3)">
					{{ skill.dictLabel }}
				</text>
			</view>
			<view class="cp-ht">&nbsp;</view>
			<view class="cp-jn-tit">
				<text class="text-w">高级测试</text>
				<text class="cp-bz">(可阶段性多次评测)</text>
			</view>
			<view class="cp-jn-con">
				<text v-for="adv in data.advancedTest" :key="adv.id" @click="fetchDetail(adv, 4)">
					{{ adv.dictLabel }}
				</text>
			</view>
			<view class="cp-ht">&nbsp;</view>
			<view class="cp-jn-tit">
				<text class="text-w">实战测试</text>
				<text class="cp-bz">(实战测试可多次测评及分享球员自测)</text>
			</view>
			<view class="cp-jn-con">
				<text v-for="field in data.fieldTest" :key="field.id" @click="fetchDetail(field, 5)">
					{{ field.dictLabel }}
				</text>
			</view>
		</view>
	</view>
	<view class="cp-ht2">&nbsp;</view>
	<!--历史测评-->
	<view class="cp-history">
		<view class="cp-history-tit flex_sbc">
			<text>历史评测</text>
		</view>
		<scroll-view class="cp-history-dh" scroll-x>
			<text
				v-for="(etype, index) in $gc.evaluationType"
				:key="index"
				:class="{ select: nowType === index }"
				@click="changeHistoryType(index)"
			>
				{{ etype }}
			</text>
		</scroll-view>
		<uni-datetime-picker v-model="timeArray" type="datetimerange" @change="changDate">
			<view class="cp-history-time flex_fsc">
				<view class="cp-history-time-left">
					{{ Array.isArray(timeArray) ? timeArray[0] : '开始时间' }}
				</view>
				<view class="time-ht">-</view>
				<view class="cp-history-time-left">
					{{ Array.isArray(timeArray) ? timeArray[1] : '结束时间' }}
				</view>
			</view>
		</uni-datetime-picker>
		<view v-if="historyList && historyList.length" class="cp-history-list">
			<view v-for="history in historyList" :key="history.id" class="cp-history-con" @click="viewHistory(history)">
				<view class="cp-history-con-top flex_sbc">
					<view class="cp-history-con-top-left flex_fsc">
						<image
							:src="`${setting.oss_pub_domain}/app-img/player/evaluation/${
								[1, 2, 4].includes(history.type) ? 'cp-jn.png' : 'cp-gj.png'
							}`"
							mode=""
							class="uni-pr-24"
						></image>
						<text>{{ history.typeStrFst }}</text>
						<text class="cp-history-tit-bz">{{ history.typeStrSed }}</text>
					</view>
					<view v-if="[3, 5].includes(history.type)" class="cp-history-con-top-right flex_fsc">
						<text>评分:{{ history.score }}</text>
						<uni-rate
							size="12"
							v-model="history.score"
							readonly="true"
							color="#E1E3E6"
							active-color="#FF7742"
						/>
					</view>
				</view>
				<view class="cp-history-con-bottom flex_sbc">
					<text class="cp-history-con-bottom-time">{{ history.updateTime }}</text>
					<view class="cp-history-con-bottom-right flex_fsc">
						<text>查看</text>
						<image :src="setting.oss_pub_domain + '/app-img/player/evaluation/look_more.png'" class="icon-size-32"></image>
					</view>
				</view>
			</view>
		</view>
		<z-no-data v-else></z-no-data>
	</view>
	<view v-if="historyList.length < paramsHistory.total" class="look-more">上拉加载更多</view>
	<view class="uni-pt-20"></view>
</template>

<script setup>
import { onReachBottom, onShow } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { getEvaluationList, getEvaluationHistory, getEvaluationDetail } from '@/api/player.js';
const { proxy: that } = getCurrentInstance();
const playerInfo = uni.getStorageSync('player-info') || {};
console.log(playerInfo);

const navBarHeight = ref(0)
onMounted(() => {
	uni.createSelectorQuery().select('.nav-bar').boundingClientRect(data => {
		navBarHeight.value = data.height
	}).exec();
})

// 评测项目列表
const data = reactive({});
const evaluationType = ['', 'basicTest', 'physicalTest', 'skillEvaluation', 'advancedTest', 'fieldTest'];
onShow(() => {
	fetchData();
	paramsHistory.pageNum = 1;
	timeArray.value = '';
	fetchHistoryList();
});
function fetchData() {
	evaluationType.forEach((item, index) => {
		if (item) fetchList(index);
	});
}
function fetchList(type) {
	const argument = { type };
	if (playerInfo.id) argument.stuId = playerInfo.id;
	getEvaluationList(argument).then((res) => {
		if ([1, 2].includes(type)) {
			res.forEach((item, index) => {
				item.image = `/app-img/player/evaluation/icon0${index + (type === 1 ? 1 : 5)}.png`;
			});
		}
		data[evaluationType[type]] = res;
	});
}

function fetchDetail(element, type) {
	uni.showLoading({
		title: '加载中...'
	});
	getEvaluationDetail({ code: element.dictCode, stuId: playerInfo.id })
		.then((res) => {
			res.playerInfo = playerInfo;
			res.type = type;
			uni.setStorageSync('evaluation-data', res);
			if ([1, 2, 4].includes(type)) {
				uni.navigateTo({
					url: '/pages/player/evaluation/base/base'
				});
			} else {
				uni.navigateTo({
					url: `/pages/player/evaluation/evaluation-base/${
						res.id === 294102 ? 'base-two' : 'evaluation-base'
					}`
				});
			}
			uni.hideLoading();
		})
		.catch(() => {
			uni.hideLoading();
		});
}

// 评测历史
const historyList = ref([]),
	paramsHistory = reactive({
		pageNum: 1,
		pageSize: 10,
		total: 0
	});
fetchHistoryList();
function fetchHistoryList(query = {}) {
	getEvaluationHistory({
		pageNum: paramsHistory.pageNum,
		pageSize: paramsHistory.pageSize,
		userId: playerInfo.id,
		...query
	}).then((res) => {
		if (paramsHistory.pageNum === 1) {
			historyList.value = res.rows;
		} else {
			historyList.value.push(...res.rows);
		}
		paramsHistory.total = res.total;
	});
}

// 类型筛选
const nowType = ref(0);
function changeHistoryType(type) {
	paramsHistory.pageNum = 1;
	timeArray.value = '';
	if (type) {
		fetchHistoryList({ type });
	} else {
		fetchHistoryList();
	}
	nowType.value = type;
}

// 历史记录时间筛选
const timeArray = ref();
paramsHistory.pageNum = 1;
function changDate(e) {
	fetchHistoryList({
		beginTime: e[0],
		endTime: e[1]
	});
}

onReachBottom(() => {
	if (historyList.value.length >= paramsHistory.total) return;
	paramsHistory.pageNum += 1;
	fetchHistoryList();
});

function viewHistory(item) {
	if ([1, 2, 4].includes(item.type)) {
		uni.setStorageSync('evaluation-data', item);
		uni.navigateTo({
			url: '/pages/player/evaluation/base/base-view'
		});
	} else {
		uni.setStorageSync('local-evaluation', JSON.parse(item.result));
		uni.navigateTo({
			url: `/pages/player/evaluation/evaluation-${
				item.type === 3 ? 'detail/evaluation-detail' : 'actualcombat/evaluation-szresult'
			}`
		});
	}
}
</script>

<style lang="scss">
@import 'student-cpdetail.scss';
</style>
